<!-- 新人优惠券 -->
<template>
	<view class="container">
		<view class="content">
			<text class="title">新人优惠券</text>
			<view class="list" v-if="list.length">
				<view class="list-item" v-for="(item, index) in list" :key="index">
					<!-- 套多一层是为了解决overflow:hidden时，有1像素边露出来 -->
					<view class="item-box">
						<view class="badge">
							<text class="text">{{item.badge}}</text>
						</view>
						<view class="top">
							<text class="unit">￥</text>
							<text class="value">{{item.value}}</text>
						</view>
						<view class="hr"></view>
						<view class="bottom">
							<text class="lable">・{{item.label}}・</text>
						</view>
					</view>
				</view>
			</view>
			<ListSkeleton v-else></ListSkeleton>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import ListSkeleton from "./skeleton/discount-coupon.vue";

	const list = ref([]);

	onMounted(() => {
		setTimeout(() => {
			list.value = [
				{ value: 188, label: '首单已领取', badge: '新人券包' },
				{ value: 8, label: '满29元可用', badge: '本单可用' },
				{ value: 8, label: '满39元可用', badge: '本单可用' },
				{ value: 10, label: '满49元可用', badge: '下单立减' },
			];
		}, 2000);
	});
</script>

<style lang="scss" scoped>
	.container {
		padding: 28rpx 25rpx 0;
		box-sizing: border-box;

		.content {
			height: 230rpx;
			border-radius: 25rpx;
			background-color: #FFEAE4;
			padding: 20rpx 16rpx 0;
			box-sizing: border-box;

			.title {
				display: block;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				line-height: 1.5;
				padding-left: 6rpx;
			}

			.list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				column-gap: 13rpx;
				margin-top: 24rpx;
				
				&-item {
					position: relative;
					height: 112rpx;
					border-radius: 15rpx;
					overflow: hidden;
					transition: transform 0.2s;
					
					&:active {
						transform: scale(0.9);
					}
					
					&::before,
					&::after {
						position: absolute;
						top: 60rpx;
						z-index: 10;
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						background-color: #FFEAE4;
						border-radius: 50%;
					}
					
					&::before {
						left: 0;
						transform: translateX(-50%);
					}
					
					&::after {
						right: 0;
						transform: translateX(50%);
					}
				}

				.item-box {
					display: flex;
					flex-direction: column;
					position: relative;
					height: inherit;
					background: linear-gradient(142deg, #FE8058 0%, #FF2862 100%);
					
					.badge {
						position: absolute;
						top: 0;
						left: 0;
						width: 64rpx;
						height: 64rpx;
						background: linear-gradient(138deg, #F9A32D 0%, #F9872F 50%, transparent 50%);
						filter: drop-shadow(4rpx 6rpx 11rpx rgba(255, 73, 78, 0.79));

						.text {
							display: block;
							font-size: 12rpx;
							color: #FFFFFF;
							font-weight: 500;
							transform: rotate(-45deg) translate(-6rpx, 4rpx);
						}
					}

					.top {
						flex-shrink: 1;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						height: 70rpx;
						padding-bottom: 4rpx;
						box-sizing: border-box;

						.unit {
							font-weight: 500;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 1.5;
						}

						.value {
							font-weight: bold;
							font-size: 54rpx;
							color: #FFFFFF;
							line-height: 1;
						}
					}

					.hr {
						border-top: 1rpx dashed white;
					}

					.bottom {
						flex-grow: 1;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-wrap: nowrap;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFCED4;

						&::after {
							position: absolute;
							bottom: -4rpx;
							left: -4rpx;
							z-index: 1;
							display: block;
							content: '';
							width: 16rpx;
							height: 16rpx;
							background: rgba(255, 255, 255, 0.39);
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
</style>